前言

結束昨天的justify-content，今天繼續探討Flex Container其他主要屬性，來討論align-items吧！

Flex Container 主要屬性:

align-items屬性值

若說justify-content定義了彈性項目在彈性容器主軸上的對齊動作，那align-items則是定義了在交叉軸（cross axis） 上的對齊行為。
與justify-content相同的是，一樣在彈性容器上宣告此屬性。

align-items 屬性會將所有直接子系的 align-self 值設定為群組。

根據特定上下文（context），align-items會分成兩種行為：

1. 在Flexbox容器中，它控制項目在交叉軸上的對齊方式，預設為垂直軸（與flex-direction相反）。
2. 在Grip佈局中，它控制圖塊軸上項目在其網格區域內的對齊方式。

但因為目前僅講到Flexbox，所以與Grip相關的部分會留到以後補充。

以下是align-items屬性值：

圖片取自CSS規範8.3

align-items: stretch

stretch 會拉長可延伸的彈性項目，成為與同一彈性線上最長/最寬的項目等長/寬。雖然說彈性相目可以延伸到佔有100%的 cross-size，但有其他更高優先權的屬性，比如說：在設定了width或height等已經明確定義尺寸的屬性，stretch 就不影響項目大小。

彈性項目的 cross-start 會緊貼彈性行的 cross-start，且彈性項目的 cross-end 也會緊貼彈性行的 cross-end。

align-items: flex-start

所有子項目會沿交叉軸起點對齊，在 flex-direction: row 下，交叉軸是垂直方向，所以彈性項目會靠上對齊。

align-items: flex-end

所有彈性項目會沿交叉軸終點對齊。
在 flex-direction: row 下，交叉軸是垂直方向，但子元素會靠下對齊。
適用在：要讓項目靠底部對齊，例如按鈕列、卡片底部對齊等設計。

align-items: center

所有彈性項目會沿交叉軸置中對齊。
在 flex-direction: row 下就是垂直置中。

align-items: baseline

彈性項目會依照文字的 baseline（文字基線）對齊，當項目高度不一定一致時，特別有用。

如彈性項目內含文字，這會讓文字底線整齊對齊，即使元素高度不同。

資料參考

書籍<CSS大全第四版>

CSS Flexible Box Layout Module Level 1 -8.3

Mdn : align-items

W3school - CSS align-items Property